﻿<!--_meta 作为公共模版分离出去-->
<!DOCTYPE HTML>
<html>
<head>
	<meta charset="utf-8">
	<meta name="renderer" content="webkit|ie-comp|ie-stand">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
	<meta http-equiv="Cache-Control" content="no-siteapp" />
	<link rel="Bookmark" href="favicon.ico" >
	<link rel="Shortcut Icon" href="favicon.ico" />
	<!--[if lt IE 9]>
	<script type="text/javascript" src="lib/html5.js"></script>
	<script type="text/javascript" src="lib/respond.min.js"></script>
	<![endif]-->
	<link rel="stylesheet" type="text/css" href="static/h-ui/css/H-ui.css" />
	<link rel="stylesheet" type="text/css" href="static/h-ui.admin.pro/css/h-ui.admin.pro.css" />
	<link rel="stylesheet" type="text/css" href="lib/Hui-iconfont/1.0.9/iconfont.css" />
	<link rel="stylesheet" type="text/css" href="static/h-ui.admin.pro/skin/default/skin.css" id="skin" />
	<link rel="stylesheet" type="text/css" href="static/business/css/style.css" />
	<!--[if IE 6]>
	<script type="text/javascript" src="http://lib.h-ui.net/DD_belatedPNG_0.0.8a-min.js" ></script>
	<script>DD_belatedPNG.fix('*');</script><![endif]-->
	<!--/meta 作为公共模版分离出去-->

	<title>公告列表</title>
	<meta name="keywords" content="h-ui.admin.pro v1.0,H-ui网站后台模版,后台模版下载,后台管理系统模版,HTML后台模版下载">
	<meta name="description" content="h-ui.admin.pro v1.0，是一款由国人开发的轻量级扁平化网站后台模板，完全免费开源的网站后台管理系统模版，适合中小型CMS后台系统。">
</head>
<body>
	<!--_menu 作为公共模版分离出去-->
	<aside class="Hui-admin-aside-wrapper">
		<div class="Hui-admin-logo-wrapper">
			<a class="logo navbar-logo" href="/aboutHui.shtml">
				<i class="va-m iconpic global-logo"></i>
				<span class="va-m">H-ui.admin</span>
			</a>
		</div>
		<div class="Hui-admin-menu-dropdown bk_2">
			<ul class="Hui-menu"></ul>
		</div>
	</aside>
	<div class="Hui-admin-aside-mask"></div>
	<div class="Hui-admin-dislpayArrow">
		<a href="javascript:void(0);" onClick="displaynavbar(this)">
			<i class="Hui-iconfont Hui-iconfont-left">&#xe6d4;</i>
		</a>
	</div>
	<!--/_menu 作为公共模版分离出去-->


	<section class="Hui-admin-article-wrapper">
		<!--_header 作为公共模版分离出去-->
		<header class="Hui-navbar">
			<div class="navbar">
				<div class="container-fluid clearfix">
          <nav id="Hui-topNav" class="nav navbar-nav f-l">
            <ul class="clearfix">
              <li><a href="">顶部菜单</a></li>
              <li class="dropDown dropDown_hover">
                <a class="dropDown_A" href="javascript:;">顶部菜单</a>
                <ul class="dropDown-menu menu radius box-shadow">
                  <li class="">
                    <a href="#">二级导航</a>
                  </li>
                  <li class="">
                    <a href="#">二级导航</a>
                  </li>
                </ul>
              </li>
            </ul>
          </nav>
          <!-- <div class="f-l" style="padding-top: 17px;">
            日期范围
            <input type="text" id="search-datetime-start" class="input-text datetimepicker-input" style="width:120px;">
            -
            <input type="text" id="search-datetime-end" class="input-text datetimepicker-input" style="width:120px;">
            <input type="text" name="" id="" placeholder=" 图片名称" style="width:200px" class="input-text">
            <button name="" id="" class="btn btn-success" type="submit"><i class="Hui-iconfont">&#xe665;</i> 搜图片</button>
          </div> -->
					<nav id="Hui-userbar" class="nav navbar-nav navbar-userbar">
						<ul class="clearfix">
							<li>超级管理员</li>
							<li class="dropDown dropDown_hover right">
								<a href="#" class="dropDown_A">admin <i class="Hui-iconfont">&#xe6d5;</i></a>
								<ul class="dropDown-menu menu radius box-shadow">
									<li><a href="javascript:;" onClick="myselfinfo()">个人信息</a></li>
									<li><a href="#">切换账户</a></li>
									<li><a href="#">退出</a></li>
								</ul>
							</li>
							<li id="Hui-msg"> <a href="#" title="消息"><span class="badge badge-danger">1</span><i class="Hui-iconfont" style="font-size:18px">&#xe68a;</i></a> </li>
							<li id="Hui-skin" class="dropDown dropDown_hover right">
								<a href="javascript:;" class="dropDown_A" title="换肤"><i class="Hui-iconfont" style="font-size:18px">&#xe62a;</i></a>
								<ul class="dropDown-menu menu radius box-shadow">
									<li><a href="javascript:;" data-val="default" title="默认（蓝色）">默认（深蓝）</a></li>
									
									<li><a href="javascript:;" data-val="green" title="绿色">绿色</a></li>
									<li><a href="javascript:;" data-val="red" title="红色">红色</a></li>
									<li><a href="javascript:;" data-val="yellow" title="黄色">黄色</a></li>
									<li><a href="javascript:;" data-val="orange" title="橙色">橙色</a></li>
								</ul>
							</li>
						</ul>
					</nav>
				</div>
			</div>
		</header>
		<!--/_header 作为公共模版分离出去-->


		<div class="Hui-admin-article">
			<nav class="breadcrumb" style="background-color:#fff;padding: 0 24px">
				首页
				<span class="c-gray en">/</span>
				资讯管理
				<span class="c-gray en">/</span>
				资讯列表
			</nav>
			<article class="Hui-admin-content clearfix">
				<div class="panel">
					<div class="panel-body">
						<div class="row clearfix">
							<div class="col-xs-12 col-sm-6 col-md-4">
								<div class="row clearfix mb-10">
									<span class="col-xs-4 form-item-label">学员编号：</span>
									<span class="col-xs-8 form-item-control">
										<input type="text" name="stuId" id="stuId" placeholder=" 学员编号" class="input-text" />
									</span>
								</div>
							</div>
							<div class="col-xs-12 col-sm-6 col-md-4">
								<div class="row clearfix mb-10">
									<span class="col-xs-4 form-item-label">宿舍位置：</span>
									<span class="col-xs-8 form-item-control">
										<span class="select-box">
											<select id="apartmentName" name="apartmentName" class="select">
												<option value="-1">请选择宿舍位置</option>
											</select>
										</span>
									</span>
								</div>
							</div>
							<div class="col-xs-12 col-sm-6 col-md-4">
								<div class="row clearfix">
									<span class="col-xs-4 form-item-control">
										<button name="" id="searchDormitoryBtn" class="btn btn-success radius" type="button"><i class="Hui-iconfont">&#xe665;</i> 查看可选宿舍列表</button>
									</span>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="panel mt-20">
					<div class="panel-body">
						<div class="clearfix">
							<span class="f-r">共有数据：<strong id="totalNum"></strong> 条</span>
						</div>
						<div class="mt-20 clearfix">
							<table id="data-table-list" class="table table-border table-bordered table-bg table-hover table-sort">
								<thead>
								<tr class="text-c">
									<!--<th width="25"><input type="checkbox" name="" value="all"></th>-->
									<th width="80">编号</th>
									<th width="160">楼栋</th>
									<th width="80">门牌号</th>
									<th width="80">寝室类型</th>
									<th width="80">寝室状态</th>
									<th width="80">操作</th>
								</tr>
								</thead>
								<tbody class="getData-list" data-currPage='1'>
								<!-- 数据渲染展示 -->

								</tbody>
							</table>

							<!--首页 上一页 当前第x页 下一页 尾页-->
						</div>
						<div id="laypage" class="text-c"></div>
					</div>
				</div>
			</article>
		</div>
	</section>
	<!--_footer 作为公共模版分离出去-->
	<script type="text/javascript" src="lib/jquery/1.9.1/jquery.min.js"></script>
	<script type="text/javascript" src="lib/layer/3.1.1/layer.js"></script>
	<script type="text/javascript" src="static/h-ui/js/H-ui.js"></script>
	<script type="text/javascript" src="static/h-ui.admin.pro/js/h-ui.admin.pro.js"></script>
	<!--/_footer /作为公共模版分离出去-->
	<script type="text/javascript" src="lib/laypage/1.2/laypage.js"></script>
	<script type="text/javascript" src="static/business/js/main2.js"></script>
	<!--/请在上方写此页面业务相关的脚本-->
	<script type="text/javascript">

		function getDormitoryList(){
			var option = {
				stuId : $("#stuId").val() || -1,
				pageNum : $(".getData-list").attr("data-currPage") || 1, // 当前第几页
				pageSize: 5, // 每页几条
				dorPosId : $("#apartmentName").val(),
			}
			// options是搜索的数据
			console.log(option);
			$.ajax({
				url: '/dormitory?action=findDormitoryChooseable',// 跳转到 action, 换成自己的接口
				data: option,
				type: 'get',
				cache: false,
				dataType: 'json', // 不一定非要json，可以是html，后台封好结构后，直接扔前台
				success: function(respData) {
					if(respData.result){ // 请求正确 返回true, 也指200状态
						var data = respData.datas; // 返回的数据
						console.log(data);
						var htmlstr = '';
						if(data.length > 0 ) {
							// 只有获取的数据对象长度大于0，我们才做for循环处理。
							for(var i = 0;i< data.length;i++){ // for循环将json数据拼接成html结构。 此处可以用模板引擎。
								htmlstr +=
										'<tr>'+
										'<td>'+ ((respData.pagination.currPage-1)*(respData.pagination.pageSize)+(i+1)) +'</td>'+
										'<td>'+ data[i].floor +'</td>'+
										'<td>'+data[i].doorNum+'</td>'+
										'<td>'+ data[i].type + '人间' +'</td>';
								// data[i].status.examine 审核状态(字符串) '0'为草稿，'1'为审核中，'2'通过，'3'为未通过，'4'为发布，'5'为下架
								if(data[i].state == '0'){
									htmlstr += '<td class="td-status"><span class="label label-default radius">空寝</span></td>';
								}
								if(data[i].state == '1'){
									htmlstr += '<td class="td-status"><span class="label label-primary radius">男寝</span></td>';
								}
								if(data[i].state == '2'){
									htmlstr += '<td class="td-status"><span class="label label-primary radius">女寝</span></td>';
								}
								htmlstr += '<td><input type="button" value="添加学生入住寝室" id="'+ data[i].dorId + '#' +option.stuId + '#' + data[i].state +'" onclick="addStudentToDormitory(this.id)"></td>';
								htmlstr += '</tr>';
							}
							// 在页面对应<tbody class=".getData-list">标签中输出拼接好的html结构。
							$(".getData-list").html(htmlstr);

							// 渲染分页
							laypage({
								cont: 'laypage',    //容器。值支持id名、原生dom对象，jquery对象。【如该容器为】：&lt;div id="laypage">&lt;/div>
								pages: Math.ceil(respData.pagination.total/respData.pagination.pageSize),  // 除法运算，向上取整
								curr: respData.pagination.currPage,    //初始化当前页
								hash: 'page',
								limits: [10, 25, 50, 100],
								first: '首页',
								last: '尾页',
								prev: '<em>&lt;&lt;</em>',
								next: '<em>&gt;&gt;</em>',
								jump: function(e, first){ //触发分页后的回调
									console.log(e);
									if(!first) {
										$(".getData-list").attr("data-currPage", e.curr);
										runGetDataList();
									}
								}
							});
						}else {
							console.log(respData.msg); // 返回正确状态，但是没有数据，在此处处理。
							var tdNum = $("#data-table-list thead tr td").length;
							htmlstr = '<tr><td colspan="'+tdNum+'" class="data-null">数据为空</td></tr>';
							$(".getData-list").html(htmlstr);
						}
						$("#totalNum").html(respData.pagination.total);
					}else {
						$("#totalNum").html('0');
						alert(respData.msg);  // 返回错误状态，通常指网络请求失败、后台报错等，最好后台给出错误提示，方便前台调试。也可定义几种返回的错误状态码，如201 203 400 404 500 503等。
					}
				},
				error: function(respData){ // ajax的error状态
					console.log(respData);
				}
			});
		}

		// 添加学生入住寝室
		function addStudentToDormitory(info){
			console.log(info);
			var data = info.split('#');
			var dorId = data[0];
			var stuId = data[1];
			var state = data[2];
			//console.log(dorId + stuId);
			$.ajax({
				method:"post",
				url:"dormitory?action=addStudentToDormitory",
				data:{"dorId":dorId, "stuId":stuId,"state":state},
				type:"json",
				success:function (result){
					console.log(result);
					alert(result.msg);
					location.reload();
				}
			});
		}

		$(function(){
			getMenu();

			$.ajax({
				method:"post",
				url:"dormitory?action=findDormitoryPosition",
				type:"json",
				success:function (result){
					console.log(result);
				 	var domitoryPositions = result.dormitoryPositions;
					// 将宿舍位置信息放入第一个select列表，id作为其value值
					for(var i = 0; i<domitoryPositions.length; i++){
						$("#apartmentName").append('<option value="'+ domitoryPositions[i].dorPosId +'">' + domitoryPositions[i].apartmentName + '</option>')
					}
				}
			});

			// 点击搜索执行...
			$("#searchDormitoryBtn").click(function () {
				getDormitoryList();
			});

		});

	</script>
</body>
</html>
